<template>
  <div class="home">
    <!-- <van-swipe :autoplay="3000" indicator-color="white" class="my-swipe">
      <van-swipe-item v-for="item in lunbolist" :key="item.id">
        <img :src="item.img" alt="" />>
      </van-swipe-item>
    </van-swipe> -->

    <mySwipe :lunbolist="lunbolist"></mySwipe>
    <!-- 官方的 -->
    <van-grid
      :column-num="3"
      class="my-grid"
    >
      <van-grid-item
        :text="grid.title"
        v-for="grid in grids"
        :key='grid.id'
        :to='grid.to'
      >
        <!-- template不会渲染成标签，只是做逻辑上的处理 -->
        <template slot="icon">
          <img :src='grid.src' />
        </template>
      </van-grid-item>
    </van-grid>
    <!-- 自己做的 -->
    <!-- <grids :grids="grids"></grids> -->
  </div>
</template>
<script>
// import Grids from '../../components/Grids'
import mySwipe from '../../components/mySwipe'
export default {
  data: () => ({
    lunbolist: [],
    grids: []
  }),
  created () {
    this.getLunBo()
    this.getGrids()
  },
  methods: {
    async getLunBo () {
      const {
        data: { status, message }
      } = await this.$axios.get('api/getlunbo')
      if (status !== 0) this.$Toast(message)
      this.lunbolist = message
    },
    async getGrids () {
      const {
        data: { status, message }
      } = await this.$axios.get('api/grids')
      if (status !== 0) this.$Toast(message)
      this.grids = message
    }
  },
  components: {
    // Grids
    mySwipe
  }
}
</script>
<style lang="less" scoped>
.home {
  // .my-swipe{
  //   height: 200px;
  //   img{
  //     width: 100%;
  //     height: 100%;
  //     display: block;
  //   }
  // }
  .my-grid {
    img {
      width: 60px;
      height: 60px;
    }
  }
}
</style>
